<template>
    <div class="home page">
        <div class="search-section">
            <el-select v-model="search.stockMarket" class="stock-market" placeholder="请选择">
                <el-option v-for="(item, i) in stockMaketList" :key="i" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input placeholder="请输入股票代码/股票名称" v-model="search.keyword" class="stock-code">
            </el-input>
            <el-button class="btn-search">搜索</el-button>
        </div>
        <div class="content">
            <div class="tab">
                <div class="tab-header">
                    <span v-for="(item, i) in tabHeaderList"
                        :key="i" class="tab-header-item"
                        :class="{active: i === activeTab}"
                        @click="activeTab = i">
                        {{item}}
                    </span>
                </div>
                <div class="tab-content">
                    <component :is="tabContent"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import StockPanel from './stock-panel';
export default {
    name: 'Homepage',
    components: {StockPanel},
    data() {
        this.stockMaketList = [
            {label: 'A股', value: '0'},
            {label: 'B股', value: '1'},
            {label: 'H股', value: '2'},
            {label: 'N股', value: '3'},
            {label: 'S股', value: '4'}
        ];
        this.tabHeaderList = ['上证', '深证', '沪深', '创业板'];
        return {
            search: {
                stockMarket: '0',
                keyword: ''
            },
            activeTab: 0
        };
    },
    computed: {
        tabContent() {
            return 'StockPanel';
        }
    }
};
</script>

<style lang="less">
.home {
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
    .search-section {
        margin-top: 50px;
        height: 60px;
        display: flex;
        flex-direction: row;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 3px;
        .stock-market {
            .el-input__inner {
                width: 100px;
                text-align: right;
            }
        }
        .stock-market,
        .stock-code {
            .el-input__inner {
                height: 60px;
                background: transparent;
                border: 0;
                color: #fff;
            }
        }
        .btn-search {
            margin: 5px;
        }
    }
    .content {
        margin-top: 30px;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .tab {
        .tab-header {
            display: flex;
            border-bottom: #41484d solid 1px;
        }
        .tab-header-item {
            width: 78px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            &:hover {
                color: #bfbfbf;
            }
            &.active {
                color: #ff9e2b;
                border-bottom: 2px solid #ff9e2b;
            }
        }
    }
}
</style>
